<template>
    <div class="search">
        <nav class="searchList-nav" ref="change">
            <el-menu
                default-active="1"
                class="el-menu-vertical-demo"
                mode="vertical"
                active-text-color="#fc3e7e"
                @select="handleChangeView">
            <el-menu-item index="1">
                <i class="el-icon-document"></i>
                <span slot="title">歌曲</span>
            </el-menu-item>
            <el-menu-item index="2">
                <i class="el-icon-folder-opened"></i>
                <span slot="title">歌单</span>
            </el-menu-item>
            </el-menu>
        </nav>
        <component :is="currentView" style="flex:auto;"></component>
    </div>
</template>
<script>
import searchSongs from '../components/search/SearchSongs'
import searchSongLists from '../components/search/SearchSongLists'

export default {
   name: 'search',
   components: {
       searchSongs,
       searchSongLists
   },
   data(){
       return {
           toggle: 'Songs',
           currentView: 'searchSongs'
       }
   },
   methods:{
       //切换组件
       handleChangeView(val){
        if(val==1){
            this.currentView='searchSongs'
        }else if(val==2){
            this.currentView='searchSongLists'
        }
       }
   } 
}
</script>
<style lang="scss" scoped>
@import '../assets/css/search.scss';
</style>